
import {
    AmbientLight,
      AxesHelper,
    BoxGeometry,
    Color,
    Mesh,
    MeshStandardMaterial,
    PerspectiveCamera,
    Scene,
    WebGLRenderer,
    GridHelper
  } from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls";
  
  let ratio = window.innerWidth / window.innerHeight;
  let camera = new PerspectiveCamera(75, ratio, 1, 1000);
  camera.position.set(5, 5, 5);
  let scene = new Scene();
  scene.background = new Color("#fff");
  
  let ambientLight = new AmbientLight("#fff", 1);
  scene.add(ambientLight);
  
  let boxGeo = new BoxGeometry(3, 3, 3);
  let boxMat = new MeshStandardMaterial({ color: "#f00" });
  let boxMesh = new Mesh(boxGeo, boxMat);
  boxMesh.position.set(0, 0, 0);
  scene.add(boxMesh);
  
  let axesHelper = new AxesHelper(10);
  scene.add(axesHelper);

  let gridHelper = new GridHelper(100, 10);
  scene.add(gridHelper);
  
  let renderer = new WebGLRenderer({
    antialias: true,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.append(renderer.domElement);
//   let control = new OrbitControls(camera, renderer.domElement);
  let control = new FirstPersonControls(camera, renderer.domElement);
  
  (function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    control.update(0.1);
  })();
  